<template>
    <div class="container container--zone mt6">
        <div class="region region--full">
            <div class="component component--module page-header">
                <div class="column column--full">
                    <header class="header header--page">
                        <h1 class="title">
                            <span class="label">Real Estate</span>
                        </h1>
                    </header>
                </div>
            </div>
            <div class="component component--module text__block ">
                <div class="column column--primary">
                    <div class="element element--textblock">
                        <p>Sinopoly Watch Picks highlights items we think you'll find useful; the MarketWatch News staff
                            is
                            not involved in creating this content. We might earn a commission from links in this
                            content. <a>Learn more</a></p>
                    </div>
                </div>
            </div>
            <div class="component component--layout layout--C2">
                <div class="region region--full">
                    <imgTextMd :lastRightData="realWatchData"></imgTextMd>
                </div>
                <mastPopular></mastPopular>
            </div>
            <futures :newsData='fetuRealData'></futures>
            <div class="group group--buttons cover">
                <button class="btn btn--secondary js--more-headlines">
                    See More
                </button>
                <button class="btn btn--primary js-search-top" @click='toTop'>
                    Back to Top
                </button>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import imgTextMd from './imgTextMd/imgTextMd.vue';
import mastPopular from "../home/mastPopular/mastPopular.vue";//最受欢迎模块
import futures from '../inverting/futures/futures.vue';
import { usePickArrays } from '../../api/picks';
const { realWatchData, fetuRealData } = usePickArrays()
const toTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}
</script>
<style scoped lang='scss'>
.element--textblock {
    p {
        font-size: 13px;
    }
}

.cover {
    width: auto;
    margin-top: 10px;
}
</style>